<template xmlns="">
    <a-card title="收费员管理" :bordered="false">
        <template slot="extra">
            <a-form-model layout="inline" @submit.prevent="searchSubmit">
                <a-form-model-item class="width150">
                    <a-input v-model="searchForm.code"
                             :allowClear="$store.getters.allowClear"
                             placeholder="收费员账号"></a-input>
                </a-form-model-item>
                <a-form-model-item class="width150">
                    <a-input v-model="searchForm.name"
                             :allowClear="$store.getters.allowClear"
                             placeholder="收费员名称"></a-input>
                </a-form-model-item>

                <a-form-model-item>
                    <a-button type="primary" html-type="submit">搜索</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="searchRest">重置</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="danger" @click="openEdit()">新建</a-button>
                </a-form-model-item>
            </a-form-model>
        </template>
        <!-- 表格开始 -->
        <a-table :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :pagination="pagination"
                 :loading="loading" @change="handleTableChange" bordered>


                <template slot="status" slot-scope="text, record">{{$exMod.findDict(CashierStatusOPT,record.status)}}</template>

            <template slot="placeCodes" slot-scope="text, record">
                <span v-html=" formatPlace(text) "></span>

            </template>


            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">

                <a-popconfirm :title='`确定要重置密码为 ${rePassWord} 吗?`' @confirm="() => resetPassword(record)">
                    <span><a href="javascript:void(0) ;">重置密码</a></span>
                </a-popconfirm>


                <a-divider type="vertical"/>

                <a @click="openEdit(record)">编辑</a>

            </template>
        </a-table>
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>



    </a-card>
</template>
<script>
    import {pagination, cashierTable} from '../public/colums.js';
    import {cashierList, cashierUpdate, cashierDelete} from '../public/http.js';
    import {dictLoad} from "../../../util/internal.api";
    import {PlaceDict} from "../public/internal";


    export default {
        components: {
            EditBox: () => import('./edit.vue')
        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: cashierTable, //表头管理
                searchForm: {},
                CashierStatusOPT:[],
                PlaceOPT:[],
                rePassWord: "654321",

            };
        },
        methods: {


                formatPlace(str){
                    let res="";
                    const array = str.split(",");

                    for (let i=0;i<array.length;i++){

                        res+='<span class="margin-r-1rem">'  + this.$exMod.findDict(this.PlaceOPT,array[i]) +'</span>';

                    }


                    return res;
                },



            //5.0 重置密码
            resetPassword(record) {
                let data = {id: record.id, password: this.rePassWord}
                cashierUpdate(record.id, data).then(res => {
                    //成功提醒
                    this.$notification.success({
                        message: '操作成功',
                        description: res.message
                    });
                });

            },

            searchRest() {
                this.searchForm = {
                    code: '',
                    name: '',
                    description: '',
                }
                this.getTableList()
            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                cashierList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0删除收费 接口待定
            removeRecord(record) {
                this.loading = true;
                cashierDelete(record.id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                    this.loading = false;
                });
            },
            //数据初始化
            async init() {
                await dictLoad("CashierStatus").then(res => {
                    this.CashierStatusOPT = res;

                });


                await PlaceDict().then(res => this.PlaceOPT = res);
                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>
